<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">订单管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2" @click="toOrder">填写退货详情</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="basic">
      <p class="header">订单信息</p>
      <ul class="ul">
        <li>
          <!-- <p>原订单编号：2000103923</p> -->
          <p>订单编号：{{ tableData.orderUser.orderIdStr }}</p>
          <p>订单状态： {{ tableData.orderUser.orderType }}</p>
          <p>时 间 ：{{ tableData.orderUser.createdTime }}</p>
          <p>客服：{{ tableData.orderUser.employeeName }}</p>
        </li>
        <li>
          <span>客户信息 ：</span>
          <span>{{ tableData.orderUser.customerUserName }}</span>
          <span>{{ tableData.orderUser.customerUserPhone }}</span>
          <span>{{ tableData.orderUser.detailedAddress }}</span>
        </li>
        <li>
          <span>收货信息 ：</span>
          <span>{{ tableData.orderUser.addressName }}</span>
          <span>{{ tableData.orderUser.addressPhone }}</span>
          <span>{{ tableData.orderUser.address }}</span>
        </li>
      </ul>
    </div>
    <div class="goods">
      <p class="header">商品详情</p>
      <span> 商品 </span>
      <el-table
        :data="tableData.orderCommodityList"
        style="width: 100%"
        align="center"
      >
        <el-table-column label="品牌" prop="brandName"></el-table-column>
        <el-table-column label="商品名称" prop="name"></el-table-column>
        <el-table-column label="原订单数" prop="number"></el-table-column>
        <el-table-column
          label="可退回数量"
          min-width="90px"
          prop="waitNumber"
        ></el-table-column>
        <el-table-column label="退货数量" min-width="150">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.numberC"
              :min="0"
              size="mini"
              :max="scope.row.waitNumber"
              label="描述文字"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column
          label="规格"
          prop="specificationName"
        ></el-table-column>
        <el-table-column label="小计" prop="total"></el-table-column>
      </el-table>

      <span> 赠品 </span>
      <el-table
        :data="tableData.orderComplimentaryList"
        style="width: 100%"
        align="center"
      >
        <el-table-column label="品牌" prop="brandName"></el-table-column>
        <el-table-column
          label="商品名称"
          prop="complimentaryName"
        ></el-table-column>
        <el-table-column label="原订单数" prop="number"></el-table-column>
        <el-table-column
          label="可退回数量"
          min-width="90px"
          prop="waitNumber"
        ></el-table-column>
        <el-table-column label="退货数量" min-width="150">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.numberC"
              :min="0"
              size="mini"
              :max="scope.row.waitNumber"
              label="描述文字"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column
          label="规格"
          prop="specificationName"
        ></el-table-column>
        <el-table-column label="小计" prop="total"></el-table-column>
      </el-table>
    </div>
    <div class="total">
      <div class="before">
        <p>原单总计</p>
        <p>共 {{ totalCout(0) }} 件</p>
        <p>运费：￥{{ tableData.orderUser.charge }}</p>
        <p>赠品总价： ￥0</p>
        <p>商品总价：￥{{ tableData.orderUser.total }}</p>
        <p>应收金额：￥{{ tableData.orderUser.total }}</p>
        <p>已收金额：￥{{ tableData.orderUser.receivedMoney }}</p>
        <p>代收金额：￥0</p>
      </div>
      <div class="back">
        <p>退货总计</p>
        <p>共 {{ totalCout(1) }} 件</p>
        <!-- <p>商品总价 ￥{{ totalCout(2) }}</p> 尹聪-->
								 <!-- <p>总价 ￥{{ totalCout(2) }}</p> -->
      </div>
      <div class="deal">
        <!-- <p>已收金额： ￥{{ tableData.orderUser.total }}</p> 尹聪-->
								 <p>已收金额： ￥{{ tableData.orderUser.receivedMoney }}</p>
        <!-- <p>应退金额： ￥{{ totalCout(2) }}</p> 尹聪 -->
								<p>已退总金额: ￥{{tableData.orderUser.returnMoneyAll}}</p>
        <div>
          <p><span>*</span>实退金额</p>
          <p>
            <el-input-number
              style="width:100px;"
              :min="0"
              :max="tableData.orderUser.receivedMoney"
              :controls="false"
              v-model="salay"
            ></el-input-number>
          </p>
        </div>
      </div>
    </div>
    <div class="notes">
      <p class="header">备注</p>
      <div>
        <el-input
          type="textarea"
          v-model="textarea"
          placeholder="请输入需要备注信息....."
        ></el-input>
      </div>
    </div>
    <div class="submit">
      <p @click="submintEvent" style="cursor: pointer;">提交退货</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: {
        orderCommodityList: [],
        orderComplimentaryList: [],
        orderUser: {},
      },
      textarea: "",
      salay: 0,
      wareData: [],
    };
  },
  created() {
    this.getOrderDetail();
  },
  methods: {
    submintEvent() {
      let o1 = [];
      let o2 = [];

      if (this.tableData.orderCommodityList) {
        this.tableData.orderCommodityList.forEach((e) => {
          let temp = JSON.parse(JSON.stringify(e));
          temp.number = temp.numberC ? Number(temp.numberC) : 0;
          o1.push(temp);
        });
      }
      if (this.tableData.orderComplimentaryList) {
        this.tableData.orderComplimentaryList.forEach((e) => {
          let temp = JSON.parse(JSON.stringify(e));
          temp.number = temp.numberC ? Number(temp.numberC) : 0;
          o2.push(temp);
        });
      }
      let that = this;
      this.$confirm("退货数量" + that.totalCout(1), "确定提交退货申请", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })

        .then(() => {
          if (this.totalCout(1)) {
            that.axios
              .post("/order/order/return/addreturnorder", {
                comment: that.textarea,
                orderId: that.tableData.orderUser.orderId,
                orderReturnCommodityRequestList: o1.filter(
                  (res) => res.numberC > 0
                ),
                orderReturnComplimentaryRequestList: o2.filter(
                  (res) => res.numberC > 0
                ),
                orderType: that.tableData.orderUser.orderType,
                returnCharge: that.tableData.orderUser.charge,
                returnMoney: that.salay,
                shouldReturnMoney: this.totalCout(2),
                returnNumber: that.totalCout(1),
                returnStatus: that.totalCout(1) < that.totalCout(0) ? 2 : 3,
                shouldReturnMoney: that.totalCout(2),
              })
              .then((res) => {
                if (!res.code) {
                  this.$message.success("申请成功");
                  this.$router.go(-1);
                } else {
                  this.$message.warning(res.message);
                }
              });
          } else {
            this.$message.warning("没有可退回数量");
          }
        })
        .catch((res) => {
          console.log(res);
          this.$message({
            type: "info",
            message: "申请失败",
          });
        });
    },
    getOrderDetail() {
      this.axios
        .get("/order/order/user/detail/" + this.$route.query.id)
        .then((res) => {
          this.tableData = res.data;
          if (this.tableData.orderCommodityList) {
            for (let temp of this.tableData.orderCommodityList) {
              this.$set(temp, "numberC", 0);
            }
          }
          if (this.tableData.orderComplimentaryList) {
            for (let temp of this.tableData.orderComplimentaryList) {
              this.$set(temp, "numberC", 0);
            }
          }

          this.axios.post("/order/comm/commWarehouse/list",{
        pageSize:999,
        pageNo:1
      }).then((res) => {
            this.wareData = res.data.list;
          });
        });
    },
    toOrder() {
      this.$router.push({
        name: "orderList",
        query: {
          activeName: "6",
        },
      });
    },
  },
  computed: {
    totalCout() {
      return (v) => {
        let count = 0;
        if (this.tableData.orderCommodityList) {
          this.tableData.orderCommodityList.forEach((e) => {
            if (!v) {
              count += e.number;
            } else if (v == 1) {
              count += e.numberC ? e.numberC : 0;
            } else if (v == 2) {
              count += Number(Number(e.numberC * e.price).toFixed(2));
            }
          });
        }
        if (this.tableData.orderComplimentaryList) {
          this.tableData.orderComplimentaryList.forEach((e) => {
            if (!v) {
              count += e.number;
            } else if (v == 1) {
              count += e.numberC ? e.numberC : 0;
            } else if (v == 2) {
              count += Number(Number(e.numberC * e.price).toFixed(2));
            }
          });
        }
        return count ? count : 0;
      };
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div2:hover {
  cursor: pointer;
}

.basic {
  // width:94%;
  background: #fff;
  padding: 10px;

  .ul {
    padding: 10px 0;

    li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      line-height: 35px;

      p {
        margin-right: 20px;
        font-size: 15px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
      }

      span {
        margin-right: 5px;
        font-size: 15px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 2px solid #e3e7ec;
}

.goods {
  background: #fff;
  margin: 10px auto 0;
  padding: 10px;

  > span {
    font-size: 15px;
    display: block;
    line-height: 30px;
    color: #2d7edf;
  }
}

/deep/.el-table .has-gutter .is-leaf {
  color: #333;
  text-align: center;
}

/deep/.el-table td,
.el-table th {
  text-align: center;
}

.total {
  background-color: #fff;
  padding: 10px;

  .before {
    width: 100%;
    text-align: right;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 15px;

    p {
      display: inline-block;
      color: #333;
      font-size: 14px;
      margin-left: 15px;
      font-weight: 600;
    }
  }

  .back {
    width: 100%;
    text-align: right;
    border-bottom: 1px solid #d9d9d9;
    padding: 10px 0;

    p {
      display: inline-block;
      color: #333;
      font-size: 14px;
      margin-left: 25px;
      font-weight: 600;
    }

    p:nth-child(2) {
      padding: 0 30px;
    }
  }

  .deal {
    // width: 100%;
    // text-align: right;
    // width:30%;
				// position: relative;
				// right:0;
				// top:0;
    > p {
      font-size: 14px;
      color: #5276e9;
      font-weight: 600;
						line-height: 30px;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-end;
      // margin: 15px 80px 15px 15px;
      // width:250px;
      // text-align: left;
    }

    div {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-end;
					align-items: center;
      p {
        display: inline-block;
        margin-right: 10px;
        font-size: 14px;
        color: #5276e9;
        font-weight: 600;

        span {
          color: #ff5656;
          font-weight: normal;
        }
      }

      /deep/.el-input__inner {
        width: 100px;
        height: 25px;
        line-height: 25px;
        background: #f2f2f2;
        border-radius: 4px;
        border: none;
      }
    }
  }
}

.notes {
  margin: 10px 0;
  background: #fff;
  padding: 10px;

  div {
    margin: 10px 0;
  }
}

.submit {
  background-color: #fff;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #d9d9d9;
  p {
    line-height: 30px;
    height: 30px;
    background: #4168e7;
    border-radius: 4px;
    width: 100px;
    color: #fff;
    font-size: 14px;
    text-align: center;
  }
}
</style>
